<template>
	<view class="basic-information">
		<view class="basic-content">
			<view class="basic-information-title">
				<view class="line"></view>
				<view class="title-text">采伐地点</view>
			</view>
			<view class="form-box">
				<!-- label-position="top" -->
				<uni-forms class="customForm" ref="customForm" :modelValue="loggingFromData">
					<picker @change="bindPickerChange($event, 1)" :value="loggingFromData.townIndex" :range="regions"
						:range-key="'name'" class="picker-view">
						<uni-forms-item class="form-item" label="乡镇(场)：" required name="townName">
							<uni-easyinput v-model="loggingFromData.townName" placeholder="请选择" :readonly="true"
								:disabled="true" />
							<view class="dw">
								<uni-icons type="right" size="24" color="rgba(51, 51, 51, 0.4)"></uni-icons>
							</view>
						</uni-forms-item>
					</picker>

					<picker @change="bindPickerChange($event, 2)" :value="loggingFromData.regionIndex" :range="regions2"
						:range-key="'name'" class="picker-view">
						<uni-forms-item class="form-item" label="村委会(工区)：" required name="regionName">
							<uni-easyinput v-model="loggingFromData.regionName" placeholder="请选择" :readonly="true"
								:disabled="true" />
							<view class="dw">
								<uni-icons type="right" size="24" color="rgba(51, 51, 51, 0.4)"></uni-icons>
							</view>
						</uni-forms-item>
					</picker>

					<uni-forms-item class="form-item" label="村民小组：" required name="villagerGroup">
						<uni-easyinput v-model="loggingFromData.villagerGroup" placeholder="请输入" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="地点名：" required name="address">
						<uni-easyinput v-model="loggingFromData.address" placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="basic-information-title">
				<view class="line"></view>
				<view class="title-text">申请人</view>
			</view>
			<view class="ID">
				<view class="ID-title">
					<view class="ID-f">*</view>
					<view class="ID-t">上传身份证</view>
				</view>
				<view class="shangchuan">
					<view class="shangchuan-item shangchuan-item1">
						<uni-file-picker ref="files" v-model="fileListArr" fileMediatype="image" limit="1" title=""
							@select="select" @progress="progress" @success="success" @fail="fail">
							<view class="files-img"></view>
						</uni-file-picker>
						<view class="files-text">国徽面</view>
					</view>
					<view class="shangchuan-item shangchuan-item2">
						<uni-file-picker ref="files" v-model="fileListArr" :auto-upload="false" fileMediatype="image"
							limit="1" title="" @select="select2" @progress="progress" @success="success" @fail="fail">
							<view class="files-img"></view>
						</uni-file-picker>
						<view class="files-text">人像面</view>
					</view>
				</view>
			</view>
			<view class="form-box">
				<uni-forms class="customForm" ref="customForm2" :modelValue="loggingFromData" label-position="top">
					<uni-forms-item class="form-item" label="姓名：" required name="idCardName">
						<uni-easyinput v-model="loggingFromData.idCardName" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="身份证号码：" required name="idCardNo">
						<uni-easyinput v-model="loggingFromData.idCardNo" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="身份证住址：" name="idCardAddress">
						<uni-easyinput v-model="loggingFromData.idCardAddress" placeholder="自动识别" />
					</uni-forms-item>

					<uni-forms-item class="form-item" label="手机号码：" required name="phoneNumber">
						<uni-easyinput v-model="loggingFromData.phoneNumber" placeholder="请输入" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="tishi">申请人无不良征信记录，可以前往信用中国网站进行查验</view>
		</view>
		<view class="inform-btn">
			<button class="long-radius-btn sumit-btn" @click="leeBtnClickD">
				下一步
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loggingFromData: {
					townRno: null,
					townName: null,
					rno: null,
					regionName: null,
					villagerGroup: null, //村民小组
					address: null, // 地点名
					idCardName: null, //姓名
					idCardNo: null, //身份证号
					idCardAddress: null, // 身份证地址
					phoneNumber: null, //手机号码
				},
				regions: [],
				regions2: [],
				fileListArr: [],
				idCardFront: [],
				idCardBack: [],
				visitorRules: {
					// 添加表单的校验规则
					townName: {
						rules: [{
							required: true,
							errorMessage: "请选择乡镇(场)",
						}, ],
					},
					regionName: {
						rules: [{
							required: true,
							errorMessage: "请选择村委会",
						}, ],
					},
					villagerGroup: {
						rules: [{
							required: true,
							errorMessage: "请输入村民小组",
						}, ],
					},
					address: {
						rules: [{
							required: true,
							errorMessage: "请输入地点名",
						}, ],
					},
					idCardName: {
						rules: [{
							required: true,
							errorMessage: "请输入姓名",
						}, ],
					},
					idCardNo: {
						rules: [{
								required: true,
								errorMessage: "请输入身份证号",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
										callback("身份证格式有误");
										return true;
									}
								},
							},
						],
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: "请填写手机号码",
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
										callback("手机号格式有误");
										return true;
									}
								},
							},
						],
					},
				},
			};
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.customForm.setRules(this.visitorRules);
				this.$refs.customForm2.setRules(this.visitorRules);
			});
		},
		onLoad(res) {
			this.regions = uni.getStorageSync('regions')
			// this.newqueryRegionListByLevel();
		},
		methods: {
			// leeBtnClickD: debounced(function (pageParam) {
			//   this.submit();
			// }, 500),
			async leeBtnClickD() {
				const validationPromises = this.$refs.customForm
					.validate()
					.then((formValid) => {
						return formValid;
					})
					.catch((err) => {
						console.log(err);
						uni.showToast({
							icon: "error",
							title: `${err[0].errorMessage}`,
						});
						return false;
					});
				const validationPromises2 = this.$refs.customForm2
					.validate()
					.then((formValid) => {
						return formValid;
					})
					.catch((err) => {
						console.log(err);
						uni.showToast({
							icon: "error",
							title: `${err[0].errorMessage}`,
						});
						return false;
					});
				console.log(validationPromises, validationPromises2);
				const validationResults = await Promise.all([
					validationPromises,
					validationPromises2,
				]);
				console.log(validationResults)
				const allVisitorsValid = validationResults.every((valid) => valid);
				if (allVisitorsValid) {
					if (this.idCardFront.length && this.idCardBack.length) {
						this.$globalVariable.townName = this.loggingFromData.townName
						this.$globalVariable.townRno = this.loggingFromData.townRno
						this.$globalVariable.rno = this.loggingFromData.rno
						this.$globalVariable.regionName = this.loggingFromData.regionName
						this.$globalVariable.villagerGroup = this.loggingFromData.villagerGroup
						this.$globalVariable.address = this.loggingFromData.address
						this.$globalVariable.idCardFront = this.idCardFront[0]
						this.$globalVariable.idCardBack = this.idCardBack[0]
						this.$globalVariable.idCardName = this.loggingFromData.idCardName
						this.$globalVariable.idCardNo = this.loggingFromData.idCardNo
						this.$globalVariable.idCardAddress = this.loggingFromData.idCardAddress
						this.$globalVariable.phoneNumber = this.loggingFromData.phoneNumber
						this.nextstep();
					} else {
						uni.showToast({
							icon: "error",
							title: "请上传身份证",
						});
					}
				}
			},
			onpopupclosed(e) {
				console.log(e);
			},
			select(e) {
				console.log(e);
				this.upType = "img";
				let arrObj = e.tempFiles.slice();
				if (e.tempFiles.length) {
					e.tempFiles.forEach((item) => {
						this.uploadImgVideo(arrObj, 1);
					});
				}
			},
			select2(e) {
				console.log(e);
				this.upType = "img";
				let arrObj = e.tempFiles.slice();
				if (e.tempFiles.length) {
					e.tempFiles.forEach((item) => {
						this.uploadImgVideo(arrObj, 2);
					});
				}
			},
			// 上传图片或视频
			async uploadImgVideo(tempFilePaths, type) {
				let hz = tempFilePaths[0].extname;
				let file = tempFilePaths[0];
				console.log(uni.getStorageSync("wechatInfo").token);
				// uni.uploadFile({
				//   url: "https://yunlzz.com.cn" + uploadFile,
				//   filePath: file.path,
				//   name: "files",
				//   header: {
				//     ksp_token: uni.getStorageSync("wechatInfo").token,
				//   },
				//   success: (uploadFileRes) => {
				//     let data = JSON.parse(uploadFileRes.data);
				//     if (type == 1) {
				//       this.idCardFront = data.appendixList;
				//     } else {
				//       this.idCardBack = data.appendixList;
				//     }
				//     if (this.idCardFront.length && this.idCardBack.length) {
				//       this.checkIdCardlist();
				//     }
				//   },
				//   fail: (uploadFileErr) => {
				//     uni.hideLoading();
				//     console.error("upload fail:", uploadFileErr);
				//   },
				// });
			},
			checkIdCardlist() {
				// let params = {
				//   url: checkIdCard,
				//   method: "post",
				//   param: {
				//     idCardFront: this.idCardFront[0],
				//     idCardBack: this.idCardBack[0],
				//   },
				// };
				// ajax(params).then((res) => {
				//   console.log(res.code);
				//   if (res.code == "0000") {
				//     this.loggingFromData.idCardName = res.idCardInfo.name;
				//     this.loggingFromData.idCardNo = res.idCardInfo.idNumber;
				//     this.loggingFromData.idCardAddress = res.idCardInfo.address;
				//   } else {
				//     uni.showToast({
				//       icon: "error",
				//       title: res.message,
				//       duration: 1000,
				//     });
				//   }
				// });
			},
			bindPickerChange(e, type) {
				if (type == 1) {
					this.loggingFromData.townRno = this.regions[e.detail.value].rno;
					this.loggingFromData.townName = this.regions[e.detail.value].name;
					this.loggingFromData.regionName = null;
					this.loggingFromData.rno = null;
					// let params = {
					//   url: queryRegionListByLevel,
					//   method: "post",
					//   param: {
					//     pNo: this.regions[e.detail.value].rno,
					//     levelId: 3,
					//   },
					// };
					// ajax(params).then((res) => {
					//   console.log(res.code);
					//   if (res.code == "0000") {
					//     this.regions2 = res.regions.map((item) => {
					//       item.name = item.rname;
					//       return item;
					//     });
					//   }
					// });
				} else {
					this.loggingFromData.rno = this.regions2[e.detail.value].rno;
					this.loggingFromData.regionName = this.regions2[e.detail.value].name;
				}
			},
			nextstep() {
				uni.navigateTo({
					url: "/pages/logging/logging",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	
</style>